<template>
  <div class="app-container Blog">
      <hz-search title="用户管理" :actionData="searchActionData" :havuSearch='false'></hz-search>
     <hz-table
        :label-data="tableData.cloumn"
        :table-data="tableData.data"
        :counts="count"
        pagi
        :load="loading"
        @selection-change="getSelectionChange"
        :current-page="this.searchParams.page"
        @pageChange="getCurrentPage"
      >
        <!-- <el-table-column prop="label" label="分类名称" > </el-table-column> -->
        <el-table-column label="性别" >
          <template slot-scope="scope">
            {{scope.row.sex === '0' ? '男' : '女'}}
          </template>
        </el-table-column>
        <el-table-column label="创建时间" width="180" >
          <template slot-scope="scope">
            {{time(scope.row.createTime)}}
          </template>
        </el-table-column>
        <el-table-column label="修改时间" width="180" >
          <template slot-scope="scope">
            {{time(scope.row.updateTime)}}
          </template>
        </el-table-column>
        <el-table-column label="操作" >
          <template slot-scope="scope">
            <span class="tb-edit" @click="updateRow(scope.row)" >编辑</span>
            <span class="tb-delete" @click="deleteRow(scope.row)">移除</span>
          </template>
        </el-table-column>
    </hz-table>
    <!-- 添加或修改参数配置对话框 -->
    <el-dialog :title="dialogType === 'update' ? '编辑用户' : '创建用户'"  :visible.sync="dialogFormVisible" width="600px" append-to-body>
      <el-form ref="ruleForm" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item v-if="form.userId == undefined" label="用户名" prop="userName">
              <el-input v-model="form.userName" placeholder="请输入用户名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号码" prop="phoneNumber">
              <el-input v-model="form.phoneNumber" placeholder="请输入手机号码" maxlength="11" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
           <el-col :span="12">
            <el-form-item label="用户昵称" prop="nickName">
              <el-input v-model="form.nickName" placeholder="请输入用户昵称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户性别">
              <el-select v-model="form.sex" placeholder="请选择">
                <el-option label="女" value="0" ></el-option>
                <el-option label="男" value="1" ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item v-if="dialogType === 'add'" label="用户密码" prop="password">
              <el-input v-model="form.password" placeholder="请输入用户密码" type="password" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { time } from '@/utils/tool'
import { postAddUser, postUpdateUser, getUserList, postDeleteUser, getUserById } from '@/api/modules/system'
import HzSearch from '../../../components/compon/HzSearch.vue'
import HzTable from '../../../components/compon/HzTable.vue'
export default {
  components: { HzSearch, HzTable },
  name: 'Blog',
  data () {
    return {
      searchParams: {
        page: 1,
        rows: 5
      },
      loading: false,
      count: 0,
      tableData: {
        cloumn: [
          { label: '用户名', prop: 'userName' },
          { label: '用户昵称', prop: 'nickName' },
          { label: '手机号', prop: 'phoneNumber' },
          // { label: '主机', prop: 'userIp' },
          // { label: '登录地点', prop: 'userCity' },
          { label: '邮箱', prop: 'email' }
        ],
        data: []
      },
      dialogType: '',
      dialogFormVisible: false,
      form: {},
      // 表单校验
      rules: {
        role: [
          { required: true, message: '用户类型不能为空', trigger: 'blur' }
        ],
        userName: [
          { required: true, message: '用户名称不能为空', trigger: 'blur' }
        ],
        nickName: [
          { required: true, message: '用户昵称不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '用户密码不能为空', trigger: 'blur' }
        ],
        email: [
          {
            type: 'email',
            message: "'请输入正确的邮箱地址",
            trigger: ['blur', 'change']
          }
        ],
        phoneNumber: [
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur'
          }
        ]
      },
      //  搜索栏
      searchActionData: [{
        tip: '添加用户', icon: 'el-icon-circle-plus-outline', handleClick: this.handleAdd, auth: () => { return true }
      }
      ]
    }
  },
  computed: {
    time () {
      return time
    }
  },
  created () {
    this.fetch()
  },
  methods: {
    // 获取列表
    async fetch () {
      this.loading = true
      const res = await getUserList(this.searchParams)
      this.tableData.data = res.rows
      this.count = res.total
      this.loading = false
    },
    // 删除分类
    deleteRow (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await postDeleteUser({ id: row._id })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.fetch()
      })
    },
    async updateRow (row) {
      this.reset()
      this.form.id = row._id
      const res = await getUserById({ id: row._id })
      Object.assign(this.form, res)
      this.dialogType = 'update'
      this.dialogFormVisible = true
    },
    // 新增分类
    handleAdd () {
      this.reset()
      this.dialogType = 'add'
      this.dialogFormVisible = true
    },
    // 提交新增/编辑
    submitForm (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (!valid) {
          console.log('error submit!!')
          return false
        } else {
          if (this.dialogType === 'update') {
            await postUpdateUser(this.form).then(res => {
              this.$message({
                type: 'success',
                message: '操作成功'
              })
              this.fetch()
              this.dialogFormVisible = false
            })
          } else {
            postAddUser(this.form).then((result) => {
              this.$message({
                type: 'success',
                message: '添加成功'
              })
              this.fetch()
              this.dialogFormVisible = false
            })
          }
        }
      })
    },
    reset () {
      this.form = {
        role: '',
        email: '',
        id: '',
        label: '',
        nickName: '',
        phoneNumber: '',
        remark: '',
        sex: '',
        userName: '',
        userPic: ''
      }
    },
    // 下拉框选择每页显示条数
    getSelectionChange (val) {
      this.searchParams.rows = val
      this.searchParams.page = 1
      this.fetch()
    },
    // 切换分页
    getCurrentPage (val) {
      this.searchParams.page = val
      this.fetch()
    }
  }
}
</script>

<style  lang="scss" scoped>

</style>
